<!DOCTYPE html>
<html>
{include file='public/header'}
<body>
<link rel="stylesheet" href="__ADMIN__/plugin/editormd/css/editormd.css"/>
<style>
    .layui-form-label {
        width: 100px;
    }
</style>
<div class="x-body">
    <form class="layui-form">
        <div class="layui-tab">
            <div class="layui-tab-content">
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">标题</label>
                    <div class="layui-input-inline" style="width: 800px;">
                        <input type="text" name="title" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">分类</label>
                        <div class="layui-input-inline">
                            <select name="group_id" class="valid">
                                <option value="">请选择</option>
                                {volist name='cat_list' id='item'}
                                <option value="{$item['id']}">{$item['_name']}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">原创</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="is_original" checked="" lay-skin="switch" lay-text="是|否">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">显示</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="is_show" checked="" lay-skin="switch" lay-text="显示|关闭">
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">置顶</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="is_top" lay-skin="switch" lay-text="是|否">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">推荐</label>
                        <div class="layui-input-inline">
                            <input type="checkbox" name="is_recommend" lay-skin="switch" lay-text="是|否">
                        </div>
                    </div>
                </div>


                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">作者</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" autocomplete="off" class="layui-input" value="陈佳平">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">发布时间</label>
                        <div class="layui-input-inline" style="width: 300px;">
                            <input type="text" id="release-time" autocomplete="off" name="release-time"
                                   class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="sort" autocomplete="off" step="1" min="0" value="50"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">关键字</label>
                    <div class="layui-input-inline" style="width: 800px;">
                        <input type="text" name="keywords" placeholder="多个以逗号隔开" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text ">
                    <label for="desc" class="layui-form-label">描述</label>
                    <div class="layui-input-inline">
                        <textarea placeholder="请输入内容" name="desc" class="layui-textarea"
                                  style="width:300px;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text type-img">
                    <label for="desc" class="layui-form-label">
                        封面图
                    </label>
                    <div class="layui-input-block layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="img">
                            <p id="imgText"></p>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="desc" class="layui-form-label">内容</label>
                    <div id="content-editor">
                        <textarea name="content"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="add" lay-submit="">
                增加
            </button>
        </div>

    </form>

</div>
<script src="__ADMIN__/plugin/editormd/editormd.min.js"></script>
<script>

    $(function () {
        var editor = editormd("content-editor", {
            width: "100%",
            height: "900",
            path: "__ADMIN__/plugin/editormd/lib/",
            //theme: "dark",//工具栏主题
            //previewTheme: "dark",//预览主题
            //editorTheme: "pastel-on-dark",//编辑主题
            saveHTMLToTextarea: true,
            emoji: false,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            /*toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
                return editormd.toolbarModes['simple']; // full, simple, mini
            },*/
            imageUpload    : true,
            imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "",
        });
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#release-time'
            , type: 'datetime'
        })
    });

    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , field: "image"
            , data: {'save_path': 'active'}
            , url: '{:url("article/upload")}'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img').css('width', '200px')
                    $('#img').css('height', '100px')
                    $('#img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code == 200) {
                    var _html = "<input type='hidden' name='cover' value='" + res.data.src + "'/>";
                    $(".layui-upload-list").append(_html);
                    return layer.msg('上传成功');
                } else {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#img');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });

    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;
        //监听提交
        form.on('submit(add)', function (data) {
            /*var _obj = $(".active-explain");
            _obj.find('input').attr('name','active_explain[]');
            var _obj = $(".active-form-data");
            _obj.find('select').attr('name','active_form_data[]');*/
            data.field.active_rules = tinyMCE.activeEditor.getContent();
            //发异步，把数据提交给php
            $.post("{:url('add')}", data.field, function (response) {
                if (response.code === 200) {
                    layer.alert("增加成功", {icon: 6}, function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        window.parent.location.reload();
                        //关闭当前frame
                        parent.layer.close(index);
                        return false;
                    });
                } else {
                    layer.msg(response.msg, {icon: 5});
                    return false;
                }
            }, 'json')
            return false;
        });
    });

</script>
</body>
</html>